<template>
	<view :class="['pb130 mh100 ',type==2?'bf':'']">
		<block v-if="type==1">
			<view class="o-h ">
				<view class="wk1 " :style="'background:'+tColor+';'"></view>
				<view class="wk1ic ">
					<ls-swiper @change="lschange" crown="true" data-vue-generic="scoped" height="180" imgKey="imgUrl" imgRadius="15"
						:list="lsarr" loop="true" nextMargin="84" previousMargin="84" shadow="true" slots="true" :swcurrent="swcurrent"
						vueId="fb34f8ba-1" :vueSlots="['default']">
					</ls-swiper>
				</view>
			</view>
			<view class="p03 ">
				<view class="p03 bf bs20 mb30 pb10 ">
					<view class="f30 wei c0 mt30 ">会员权益</view>
					<btn-group :co="qyarr" vueId="fb34f8ba-3"></btn-group>
				</view>
				<view class="p03 bf bs20 mb30 ">
					<view class="f30 wei c0 p30 ">升级礼包</view>
					<block v-if="xzdjinfo.isCoupon==1">
						<mg-cell isl="1" :vueId="'fb34f8ba-4-'+i" :vueSlots="['bd']" v-for="(v, i) in xzdjinfo.couponList" :key="i">
							<view class="f-row " slot="bd">
								<view class="mr30 ">
									<text class="iconfont iconzyhq f48 c3 "></text>
								</view>
								<view class="f22 f-1 ">
									<view class="f-row ">
										<view class="f24 wei ">{{v.name}}<text class="ml10 nowei " :style="'color:'+tColor+';'">x1</text>
										</view>
										<view @tap="go({url:'/yb_wm/my/coupon/coupon-dl?nobtn=1&id='+v.id})" class="cf xqc f-c ml10 f-g-0 f20 "
											:style="'background:'+tColor+';'">详情</view>
									</view>
									<view class="c6 mt10 ">自动转入您的账户中</view>
								</view>
							</view>
						</mg-cell>
					</block>
					<mg-cell isl="1" vueId="fb34f8ba-5" :vueSlots="['bd']" v-if="xzdjinfo.isBalance==1">
						<view class="f-row " slot="bd">
							<view class="mr30 ">
								<text class="iconfont iconye1 f48 c3 "></text>
							</view>
							<view class="f22 f-1 ">
								<view class="f24 wei ">{{'赠送'+system.custom.balance}}<text class="m01 "
										:style="'color:'+tColor+';'">{{xzdjinfo.balance}}</text>{{dw}}</view>
								<view class="c6 mt10 ">{{'自动转入您的'+system.custom.balance+'中'}}</view>
							</view>
						</view>
					</mg-cell>
					<mg-cell isl="1" vueId="fb34f8ba-6" :vueSlots="['bd']" v-if="xzdjinfo.isIntegral==1">
						<view class="f-row " slot="bd">
							<view class="mr30 ">
								<text class="iconfont iconjf f48 c3 "></text>
							</view>
							<view class="f22 f-1 ">
								<view class="f24 wei ">{{'赠送'+system.custom.integral}}<text class="m01 "
										:style="'color:'+tColor+';'">{{xzdjinfo.integral}}</text>{{system.custom.integral}}</view>
								<view class="c6 mt10 ">{{'自动转入您的'+system.custom.integral+'中'}}</view>
							</view>
						</view>
					</mg-cell>
					<mg-cell isl="1" vueId="fb34f8ba-7" :vueSlots="['bd']" v-if="xzdjinfo.isGrowth==1">
						<view class="f-row " slot="bd">
							<view class="mr30 ">
								<text class="iconfont iconwc f48 c3 "></text>
							</view>
							<view class="f22 f-1 ">
								<view class="f24 wei ">赠送成长值<text class="m01 " :style="'color:'+tColor+';'">{{xzdjinfo.growth}}</text>成长值</view>
								<view class="c6 mt10 ">自动转入您的成长值中</view>
							</view>
						</view>
					</mg-cell>
				</view>
			</view>
			<view class="foot-btnc p-r " v-if="!isVip">
				<button @tap="ljkk" class="foot-btn " :disabled="loading" :loading="loading"
					:style="'background:'+tColor+';'">立即开卡</button>
			</view>
		</block>
		<block v-else>
			<view class="p34 ">
				<view class="p-r ">
					<view class="wk2img bs20 mb20 " :style="'background:'+(vipInfo.bgType==1?vipInfo.color||tColor:'')+';'">
						<mg-img :src="vipInfo.bgType==2?vipInfo.bgImg:'/static/wd/vip/vipbg.png'" vueId="fb34f8ba-8"></mg-img>
					</view>
					<view class="p-a t0 wh cf f-col ">
						<view class="f-1 ">
							<view class="wk2c1 ">
								<view class="f-y-c ">
									<view class="himg bsf mr20 ">
										<mg-img :src="user.portrait||'/static/wd/mrtx.png'" vueId="fb34f8ba-9"></mg-img>
									</view>
									<view class="f-1 ">
										<view class="f32 ">{{vipset.title}}</view>
										<view class="f20 mt10 ">{{vipInfo.name}}</view>
									</view>
									<view class="rdj b-d f26 mb20 l-n ">{{'VIP'+vipInfo.level}}</view>
								</view>
								<view class="f-x-e mt15 ">
									<text @tap="go({url:'/yb_wm/other/recharge/smzf'})" class="iconfont iconewm cf f56 "></text>
								</view>
							</view>
						</view>
						<view class="p2 f26 mb10 ">{{'NO.'+user.vipCode}}</view>
					</view>
				</view>
				<view class="p23 f-row ">
					<view @tap="myDataClick(v)" class="f-1 wei t-c " v-for="(v, i) in darr" :key="i">
						<view class="f38 wbba ">{{v.num}}</view>
						<view>{{v.name}}</view>
					</view>
				</view>
				<view class="mt20 ">
					<mg-cell ac="iconright1" arrow="1" @tab="myDataClick(v)" :btt="v.name" bttc="f30" cname="p30" ftc="f24 cd"
						:iconn="v.icn+' icname'" last="1" :vueId="'fb34f8ba-10-'+i" v-for="(v, i) in arr" :key="i"></mg-cell>
				</view>
			</view>
			<view class="foot-btnc p-r p34 " v-if="vipset.wechatCard==1">
				<navigator appId="wxeb490c6f9b154ef9" :extraData="adata" hoverClass="none" target="miniProgram"
					v-if="adata&&user.WeChatCard==2">
					<button class="foot-btn f30 wei bf b-f5 " :style="'border-color:'+tColor+';'+'color:'+tColor+';'">同步微信卡包</button>
				</navigator>
				<navigator appId="wxeb490c6f9b154ef9" :extraData="adata" hoverClass="none" target="miniProgram"
					v-if="user.WeChatCard==1">
					<button class="foot-btn f30 wei bf b-f5 " :style="'border-color:'+tColor+';'+'color:'+tColor+';'">查看微信卡包</button>
				</navigator>
			</view>
		</block>
		<tab-bar vueId="fb34f8ba-11" v-if="!query.type"></tab-bar>
		<load vueId="fb34f8ba-12" v-if="showloading"></load>
	</view>
</template>

<script>
	import MgSwiper from 'components/common/functionCmp/swiper.vue';
	import load from 'components/common/load.vue';
	import btnGroup from 'components/drag/btn.vue';
	import LsSwiper from 'components/third/ls-swiper/index';
	import {
		mapActions,
		mapState,
	} from 'vuex'
	import {
    mpShare,
		setNB,
		setNT
	} from 'common/util';
	export default {
		name: "wkk",
		components: {
			LsSwiper,
			MgSwiper,
			btnGroup,
			load,
		},
		data: function() {
			return {
				showloading: !0,
				type: 1,
				loading: !1,
				qyarr: {
					btnList: [],
					circle: 10,
					circleBtn: "10",
					colorBg: "",
					colorWord: "",
					line: "2",
					marginBottom: 0,
					marginLR: 0,
					marginTop: 0,
					num: "3"
				},
				arr: [{
					icn: "iconcz f44",
					url: "/yb_wm/other/recharge/index",
					name: "在线储值"
				}, {
					icn: "iconjfgz f44",
					url: "czz",
					name: "成长值"
				}, {
					icn: "iconqy f42",
					url: "wkk?type=1",
					name: "会员权益"
				}, {
					icn: "icondhjl f40",
					url: "/yb_wm/my/other/gywm?t=会员说明&p=6",
					name: "会员说明"
				}],
				lsarr: [],
				xzdjinfo: {},
				swcurrent: 0,
				vipInfo: {},
				adata: "",
				query: {}
			}
		},
		onLoad: function(t) {
			var e = this;
			e.query = t, Promise.all([e.getSystem(), e.getLoginInfo()]);
			e.type = e.isVip ? 2 : 1, e.query.type && (e.type = e.query.type), 1 == e.type && setNB(e.tColor),
				e.getConfig({
					key: "vipset",
					api: "config_config",
					params: {
						ident: "vipSet"
					}
				});
			1 == e.type ? setNT(e.vipset.title) : setNT("会员中心"), e.getDjlb();
		},
		onShow: function() {
			var t = this;
			this.isload ? !this.query.type && this.isVip && 1 == this.type && (this.vipInfo = this.lsarr.find((function(
				e) {
				return e.level == t.user.level
			})), this.type = 2, setNB(), setNT("会员中心"), this.getVipdata()) : this.isload = !0
		},
		computed: {
			...mapState({
				vipset: function(t) {
					return t.config.vipset
				}
			}),
			lbswiper: function() {
				return {
					class: "",
					swiper: [{
						url: "https://images.ddycms.cn/yb_wm/39/2021/01/13/202101131541554298.jpg"
					}],
					duration: "",
					mode: "",
					height: "360",
					radius: "30",
					auto: !0,
					interval: 5
				}
			},
			darr: function() {
				return [{
					url: "/yb_wm/other/recharge/yesy",
					num: this.user.balance,
					name: this.system.custom.balance
				}, {
					url: "/yb_wm/my/integral/my-integral",
					num: this.user.integral,
					name: this.system.custom.integral
				}, {
					url: "czz",
					num: this.user.growth,
					name: "成长值"
				}]
			}
		},
		methods: {

			...mapActions(["getConfig"]),
			getVipdata: function() {
				var t = this;
			},
			lschange: function(t) {
				this.xzdjinfo = t, this.qyarr.btnList = t.rightsList.map((function(t) {
					return {
						img: t.icon,
						word: t.name
					}
				}))
			},
			getDjlb: function() {
				var t = this;
				this.$api['vip-card_level__list']().then(res => {
					console.log('res:271 ', res);
					var i = res;
					t.lsarr = res, res.length && (t.lschange(i[0]), t.isVip && (t
						.refreshUser({
							nomask: 1,
							get: 1,
							now: 1
						}), t.swcurrent = res.findIndex((function(e) {
							return e.level == t.user.level
						})), t.vipInfo = res[t.swcurrent], t.getVipdata()))
						t.showloading = false;
				})
			},
			myDataClick: function(e) {
				var n = "";
				e.url && (n = e.url, "会员说明" == e.name && uni.setStorageSync("fwb", this.vipset.content)), this.go({
					t: 1,
					url: n
				})
			},
			ljkk: function() {
				var t = this;
				t.checkLogin().then(res => {
					t.go({
						url: "open"
					});
				})
			}
		},
		onShareAppMessage: function() {
			var t = "yb_wm/order/vip/wkk";
			return mpShare({
				t: this.vipset.title,
				p: t
			})
		},
		onShareTimeline: function(t) {
			return {
				title: this.vipset.title,
				imageUrl: this.getImgS(this.vipset.logo)
			}
		}
	}
</script>

<style scoped>
	.p34 {
		padding: 30rpx 40rpx;
	}

	.wk1 {
		width: 140%;
		margin-left: -20%;
		height: 345rpx;
		border-radius: 0 0 50% 50%;
		overflow: hidden;
	}

	.wk1ic {
		margin: -300rpx 0 42rpx;
	}

	.wk1ic .imgc {
		height: 360rpx;
	}

	.xqc {
		height: 30rpx;
		padding: 0 16rpx;
	}

	.wk2img {
		height: 390rpx;
	}

	.wk2c1 {
		padding: 40rpx;
	}

	.wk2c1 .himg {
		width: 90rpx;
		height: 90rpx;
	}

	.rdj {
		padding: 6rpx 16rpx;
		border-radius: 30rpx;
		border-color: #fff;
	}

	.icname {
		margin-right: 20rpx;
		color: #333;
	}
</style>